<?php
/**
 * Created by JetBrains PhpStorm.
 * User: arsen
 * Date: 7/24/13
 * Time: 12:04 AM
 * To change this template use File | Settings | File Templates.
 */
?>
<style>
    td{
        font-size: 15px;
        cursor: pointer;
    }
    tr{
        background-color: rgba(224, 224, 224, 1);
    }
    tr:nth-child(even) {
        background-color: rgba(247, 251, 252, 1);
    }

</style>

<script>
var wordID = false;
    $(function(){
        $('tr:gt(0)').on('click',function(e){
//            wordID = $(this).attr('id');
//            $.ajax({
//                url:'?r=translate/getWord',
//                method:'post',
//                data:{id:wordID},
//                dataType:"json",
//                success:function(data){
//                    console.log(data);
//                    $('#english').text(data[0].word);
//                    $('#russian').text(data[0].in_russian);
//                    $('#armenian').text(data[0].in_armenian);
//                }
//            });
            $('#english').text($(this).find('.english').text());
            $('#russian').text($(this).find('.russian').text());
            $('#armenian').text($(this).find('.armenian').text());
            $('#editBackground').fadeIn(300);
            $('#edit').css('top',e.pageY+'px');
        })

        $('#closeEditPopup').click(function(){
            $('#editBackground').hide();
        })
        
        $('body').keydown(function(e){
            if(e.which == 27)
            $('#editBackground').hide();
        })
        
    })
</script>
<div style="display: none; position: fixed;width: 100%;height: 100%;background-color: rgba(0,0,0,0.67);left: 0;top: 0;" id="editBackground">
<div style="position: absolute;right: 10px;top: 10px;font-size: 50px;color: white;cursor: pointer;" id="closeEditPopup">X</div>
<div style="position: absolute; width: 90%;height: 90%; top:0!important;margin-left: 5%; border: solid 1px silver;background-color: steelblue" id="edit">
    <h1 id="english"></h1>
    <h1 id="russian"></h1>
    <h1 id="armenian"></h1>
</div>
</div>
<table>
    <tr style="background-color: #000000;color: whitesmoke">
        <th>English</th>
        <th>Russian</th>
        <th>Armenian</th>

    </tr>
<?php foreach($words as $key=>$value){ ?>
    <tr id="<?php echo $value['id']?>">
        <td class="english"><?php echo $value['word'] ?></td>
        <td class="russian"><?php echo $value['in_russian'] ?></td>
        <td class="armenian"><?php echo $value['in_armenian'] ?></td>

    </tr>
<?php } ?>

</table>